<html><head>
<meta charset="UTF-8">
<title>服务器监控</title>
<link href="../../plugins/bootstrap-3.3.5-dist/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="../../plugins/perfect-scrollbar/css/perfect-scrollbar.min.css" rel="stylesheet">
<link href="../../plugins/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
<link href="../../css/Servicehomepage.css" rel="stylesheet">
<script src="../../js/jquery-2.2.4.js"></script>
<script src="../../js/cookie.js"></script>
<script src="../../plugins/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
<script src="../../js/prompt.js"></script>
<script src="../../plugins/echarts/echarts.min.js"></script>
<script src="../../plugins/layer/layer.js"></script><link rel="stylesheet" href="http://47.97.127.120/esb-monitor/plugin/layer/skin/default/layer.css?v=3.0.3303" id="layuicss-skinlayercss">
<script src="../../js/reportCommon.js"></script>
<script src="../../plugins/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
<script src="../../plugins/perfect-scrollbar/js/perfect-scrollbar.jquery.min.js"></script>
<script src="../../plugins/bootstrap-datetimepicker/js/moment-with-locales.min.js"></script>
<script src="../../plugins/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script>


<style>
body {	
	margin: 0px;
	padding: 0px;
}

#serverResources td .col-md-4{
min-width:4em
}
#serverResources td .col-md-8{
min-width:5em
}
.progress {
    background-color: #f5f5f5;
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;
    height: 20px;
    margin-bottom: 0px;
    overflow: hidden;
}


.breadcrumb{
 	display: inline-block;
	background-color: #fff;
	font-size: 20px;
    font-weight: bold;
    margin-left: 30px;
    margin-top: 20px;
    margin-bottom: 0px;
}
.breadcrumb > .active {
   color: #333333;
}
.breadcrumb .ics{   
    margin-top: 0px;   
}
th,td{
 text-align: center;
}
.tdr{
min-width:8%;
text-align: right;
}
.pro-box-shadow{  
-moz-box-shadow:0px 0px 6px #FF1E05; 
-webkit-box-shadow:0px 0px 6px #FF1E05;
 box-shadow:0px 0px 6px #FF1E05;
}  
</style>
</head>
<body>

<div id="alert"><div class="alert alert-warning" id="server0"><a href="#" class="close" data-dismiss="alert">×</a><strong>警告！</strong>127.0.0.1  获取信息失败</div></div>

<div class="Contents clear"> 
   <ol class="breadcrumb"> 
     <li class="active"> <i class="ics"></i>平台监控</li> 
    <li class="active">服务器监控</li>    
   </ol> 
   <i class="line" style="margin-bottom: 20px;"></i> 
  </div> 

<div style=" position: absolute;  top: 50%;  left: 50%;transform: translate(-50%, -50%); z-index:99;">
<img id="serverLoading" src="../../images/loading-0.gif" style="display: none;"></div>
 <div class="container-fluid"> 
<div class="row">
          <div class="col-sm-12 col-md-12 ">
            <div class="box box-primary">
              <div class="box-body no-padding" style="min-height:10em">
               <div class="box-header">
                  <h4 class="box-title">资源使用情况</h4></div>
                <div style="" class="table-responsive">
                
                  <table class="table table-bordered">
                    <thead>
                      <tr>
                        <th>#</th>                       
                        <th>服务器IP</th>
                        <th>服务器运行时长</th>
                        <th>&nbsp;&nbsp;CPU使用情况</th>
                        <th>&nbsp;&nbsp;内存使用情况</th>
                        <th>&nbsp;&nbsp;磁盘使用情况</th>
                       <th> &nbsp;&nbsp;发送 </th>
                       <th> &nbsp;&nbsp;接收</th> 
                       <th>获取时间</th>                                            	           
                        <th><a href="javascript:reshowServerStatus();">重新获取</a></th>
                      </tr>
                    </thead>                  
                    <tbody id="serverResources"><tr><td>1</td><td id="td20" title="[ESB_BK01, ESB_DB, ESB_IN, ESB_Management, ESB_OUT]">127.0.0.1</td><td id="td30">53天22时21分</td><td><div class="col-md-8"><div class="progress "><div id="div40" class="progress-bar progress-bar-info" style="width: 68.7px;"></div></div></div><div class="col-md-4"><span id="span40">68.7%</span></div></td><td id="td50" data-toggle="tooltip" data-placement="left" title="内存总量：7.64 GB
内存使用量：5.47 GB"><div class="col-md-8"><div class="progress "><div id="div50" class="progress-bar progress-bar-warning" style="width: 71.6%;"></div></div></div><div class="col-md-4"><span id="span50">71.6%</span></div></td><td id="td60" data-toggle="tooltip" data-placement="left" title="/(23G/148G)
"><div class="col-md-8"><div class="progress" id="pro60"><div id="div60" class="progress-bar progress-bar-info" style="width: 15.5%;"></div></div></div><div class="col-md-4"><span id="span60">15.5%</span></div></td><td id="td80" class="tdr">0.01KB/s</td><td id="td90" class="tdr">0.00KB/s</td><td id="td10">2018-06-29 16:53:31</td><td id="td70"><a href="javascript:showOneServerStatus(0);">刷新</a></td></tr></tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <div class="row">
          <div class="col-sm-12 col-md-6 ">
            <div class="box box-primary">
              <div class="box-body no-padding">            
                <div class="box-header">
                  <h4 class="box-title">CPU监控记录</h4></div>
                <div id="echartsCPU" style="min-height: 25em; -webkit-tap-highlight-color: transparent; user-select: none; position: relative; background: transparent;" _echarts_instance_="ec_1530260726381"><div style="position: relative; overflow: hidden; width: 538px; height: 350px; padding: 0px; margin: 0px; border-width: 0px; cursor: default;"><canvas width="538" height="350" data-zr-dom-id="zr_0" style="position: absolute; left: 0px; top: 0px; width: 538px; height: 350px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas></div><div style="position: absolute; display: none; border-style: solid; white-space: nowrap; z-index: 9999999; transition: left 0.4s cubic-bezier(0.23, 1, 0.32, 1), top 0.4s cubic-bezier(0.23, 1, 0.32, 1); background-color: rgba(50, 50, 50, 0.7); border-width: 0px; border-color: rgb(51, 51, 51); border-radius: 4px; color: rgb(255, 255, 255); font: 14px/21px &quot;Microsoft YaHei&quot;; padding: 5px; left: 93px; top: 150px;"><span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:#c23531;"></span>127.0.0.1: 68.8</div></div>
              </div>
            </div>
          </div>
      
          <div class="col-sm-12 col-md-6 ">
            <div class="box box-primary">
              <div class="box-body no-padding">             
                <div class="box-header">
                  <h4 class="box-title">内存监控记录</h4></div>
                <div id="echartsMemory" style="min-height: 25em; -webkit-tap-highlight-color: transparent; user-select: none; position: relative; background: transparent;" _echarts_instance_="ec_1530260726382"><div style="position: relative; overflow: hidden; width: 538px; height: 350px; padding: 0px; margin: 0px; border-width: 0px; cursor: default;"><canvas width="538" height="350" data-zr-dom-id="zr_0" style="position: absolute; left: 0px; top: 0px; width: 538px; height: 350px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas></div><div style="position: absolute; display: none; border-style: solid; white-space: nowrap; z-index: 9999999; transition: left 0.4s cubic-bezier(0.23, 1, 0.32, 1), top 0.4s cubic-bezier(0.23, 1, 0.32, 1); background-color: rgba(50, 50, 50, 0.7); border-width: 0px; border-color: rgb(51, 51, 51); border-radius: 4px; color: rgb(255, 255, 255); font: 14px/21px &quot;Microsoft YaHei&quot;; padding: 5px; left: 150px; top: 219px;"><span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:#c23531;"></span>127.0.0.1: 71.6</div></div>
              </div>
            </div>
          </div>
       
          <div class="col-sm-12 col-md-6 ">
            <div class="box box-primary">
              <div class="box-body no-padding">            
                <div class="box-header">
                  <h4 class="box-title">磁盘监控记录</h4></div>
                <div id="echartsDisk" style="min-height: 25em; -webkit-tap-highlight-color: transparent; user-select: none; position: relative; background: transparent;" _echarts_instance_="ec_1530260726383"><div style="position: relative; overflow: hidden; width: 538px; height: 350px; padding: 0px; margin: 0px; border-width: 0px; cursor: default;"><canvas width="538" height="350" data-zr-dom-id="zr_0" style="position: absolute; left: 0px; top: 0px; width: 538px; height: 350px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas></div><div style="position: absolute; display: none; border-style: solid; white-space: nowrap; z-index: 9999999; transition: left 0.4s cubic-bezier(0.23, 1, 0.32, 1), top 0.4s cubic-bezier(0.23, 1, 0.32, 1); background-color: rgba(50, 50, 50, 0.7); border-width: 0px; border-color: rgb(51, 51, 51); border-radius: 4px; color: rgb(255, 255, 255); font: 14px/21px &quot;Microsoft YaHei&quot;; padding: 5px; left: 284px; top: 86px;"><span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:#c23531;"></span>127.0.0.1: 15.5</div></div>
              </div>
            </div>
          </div>
        
          <div class="col-sm-12 col-md-6 ">
            <div class="box box-primary">
              <div class="box-body no-padding">              
                <div class="box-header">
                  <h4 class="box-title">网络监控记录</h4></div>
                <div id="echartsNetWork" style="min-height: 25em; -webkit-tap-highlight-color: transparent; user-select: none; position: relative; background: transparent;" _echarts_instance_="ec_1530260726384"><div style="position: relative; overflow: hidden; width: 538px; height: 350px; padding: 0px; margin: 0px; border-width: 0px; cursor: default;"><canvas width="538" height="350" data-zr-dom-id="zr_0" style="position: absolute; left: 0px; top: 0px; width: 538px; height: 350px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas></div><div style="position: absolute; display: none; border-style: solid; white-space: nowrap; z-index: 9999999; transition: left 0.4s cubic-bezier(0.23, 1, 0.32, 1), top 0.4s cubic-bezier(0.23, 1, 0.32, 1); background-color: rgba(50, 50, 50, 0.7); border-width: 0px; border-color: rgb(51, 51, 51); border-radius: 4px; color: rgb(255, 255, 255); font: 14px/21px &quot;Microsoft YaHei&quot;; padding: 5px; left: 79px; top: 144px;">127.0.0.1(发送) 0<br>127.0.0.1(接收) 0<br></div></div>
              </div>
            </div>
          </div>
        </div>
   </div>    
   
 
 
<script type="text/javascript">
var config={};

var isfirst = true;
var ServerIPArr = new Array();
var CPUArr = new Array();
var MemArr = new Array();
var DiskArr = new Array();
var NetWorkArr =new Array();
var maxlen;
var indexlen;
var xArr = new Array();
for (var i = 1; i < 21; i++) {
  xArr.push("");
}

$(function() {
	
	$.getJSON("../../config/monitor-config.json",function(data){
	
		config =data;
		getServerIp(true); 
			
		setInterval(function() {//5秒更新
		 	getServerIp(false);
		  },(config.mamagement.serverMonitoring.intervaltime||5)*1000);  	
	});

});

function getServerIp(loading){
 //自动刷新不需要加载层
  if(loading){
  	$('#serverLoading').css("display", "");
  }
 ServerIPArr.splice(0,ServerIPArr.length);
 indexlen = 0;
//获取所有服务IP地址
$.ajax({
        url: '../../report/esbServerIpsData',
        type: 'post',
        dataType: 'json',
        data: {},
        timeout: (config.mamagement.serverMonitoring.intervaltime||5)*1000,
        error: function(XMLHttpRequest, textStatus, errorThrown) {
        	$(".alert").alert('close');
        	$('#serverLoading').css("display", "none");       	 
		    promptError($('#alert'), XMLHttpRequest, textStatus,"serverAlert");       	
        },
        success: function(result) {       
        	$("#serverAlert").alert('close');
		    if (result.code == "0") {
		    	var len = result.data.length;
		    	maxlen = len;
		     	var nowTime = getNowFormatDate(new Date());
		      	var len2 = $('#serverResources').text().trim().length;
		      	if(len>0){//有数据
			      	for(var i=0;i<len;i++){
			      		ServerIPArr.push(result.data[i].IP);      		
			      		if(isfirst){//第一次加载
			      			CPUArr.push([]);
					        MemArr.push([]);
					       	DiskArr.push([]);
					       	NetWorkArr.push([[],[]]);
			      		}
			      		if (len2 == 0) { //若无内容添加 创建table
			      		 
					          getServerStatusHtml(i);
					          $('#td1' + i).text(nowTime); //设置查询时间
			       			  $('#td2' + i).text(result.data[i].IP);  
			       			  $('#td2' + i).attr("title",result.data[i].NAME);  			 
						 }  
						 	 
						    //获取服务器具体信息 
				       		showServerStatus(result.data[i].IP,i); 	   
			      	}
		      	}else{
		      		 $('#serverLoading').css("display", "none");
		    	 	 promptInformation($("#alert"),3,'平台暂未配置服务器信息',"serverAlert");
		      	}
		    }else{
		    	 $('#serverLoading').css("display", "none");
		    	 promptInformation($("#alert"),3,'平台暂未配置服务器信息',"serverAlert");
		    } 	
		}
   }); 
}

//获取服务器状态
function showServerStatus(serverIP,i) {
	var nowTime = getNowFormatDate(new Date());
   $('#td1' + i).text(nowTime); //设置查询时间
 $.ajax({
        url: '../../report/esbServerStatusData',
        type: 'post',
        dataType: 'json',
        data: {ip:serverIP},
        timeout: (config.mamagement.serverMonitoring.timeout||5)*1000,
        error: function(XMLHttpRequest, textStatus, errorThrown) {
        	$('#serverLoading').css("display", "none");
       		$("#server"+i).alert('close');
        	promptInformation($('#alert'), 1, serverIP+"  获取信息失败","server"+i);	        	   
        },
        success: function(result) {
    if (result.code == "0") { 
  	 	$("#server"+i).alert('close');
        $('#td3' + i).text(result.data.runtimes || '');
        $('#td8' + i).text(result.data.sendT || '');
        $('#td9' + i).text(result.data.receiveT || '');  
                    
        NetWorkArr[i][0].push(toThroughputNumber(result.data.receiveT||''));
        NetWorkArr[i][1].push(toThroughputNumber(result.data.sendT||''));
        
        if (result.data.cpuus != null && typeof(result.data.cpuus) != "undefined") {
          checkCPU(result.data.cpuus, i);                 
          CPUArr[i].push(toPoint(result.data.cpuus)*100);      
        }
        if (result.data.memtotal != null && typeof(result.data.memtotal) != "undefined") {
          checkMem(result.data.memtotal, result.data.memused, i);        
           
        }
        if (result.data.disk != null && typeof(result.data.disk) != "undefined") {
          checkDisk(result.data.disk, i);
        }
        
         if(CPUArr[i].length>20){//超过20 去除第一个
          		CPUArr[i].shift();
          		MemArr[i].shift();
          		NetWorkArr[i][0].shift();
          		NetWorkArr[i][1].shift();
          		DiskArr[i].shift();
      	}
      }
    //创建图表
    echartsCPU();
    echartsMem();
    echartsDisk();
    echartsNetWork();
    indexlen++;
    if(maxlen ==indexlen){//最后一个获取到数据后，隐藏加载
     $('#serverLoading').css("display", "none");
    }
   }
    
  }, 'json');
}

//拼装服务器状态 页面
function getServerStatusHtml(i) {
  var serverHtml = '<tr><td>' + (i + 1) + '</td></td><td id="td2' + i + '"></td><td id="td3' + i + '"></td>' + '<td><div class="col-md-8"><div class="progress "><div id="div4' + i + '" class="progress-bar progress-bar-info" ></div></div></div><div class="col-md-4" ><span id="span4' + i + '"></span></div></td>' + '<td id="td5' + i + '" data-toggle="tooltip" data-placement="left"><div class="col-md-8"><div class="progress "><div id="div5' + i + '" class="progress-bar progress-bar-warning" ></div></div></div><div class="col-md-4"><span id="span5' + i + '"></span></div></td>' + '<td id="td6' + i + '" data-toggle="tooltip" data-placement="left"><div class="col-md-8"><div class="progress" id="pro6' + i + '"><div id="div6' + i + '" class="progress-bar progress-bar-danger" ></div></div></div><div class="col-md-4"><span id="span6' + i + '"></span></div></td>' + '<td id="td8' + i + '" class="tdr"></td><td id="td9' + i + '" class="tdr"></td><td id="td1' + i + '"><td id="td7' + i + '" ><a href="javascript:showOneServerStatus(' + i + ');">'
  +'刷新</a></td></tr>';
  $('#serverResources').append(serverHtml);
}

function checkMem(memtotal, memused, i) {
  var mem = memtotal.toLowerCase().replace("k", "");
  var mem2 = memused.toLowerCase().replace("k", "");
  var percentum = (100 * mem2 / mem).toFixed(1);
  MemArr[i].push(percentum);
  $('#div5' + i).css("width", percentum + "%");
  $('#span5' + i).text(percentum + "%");

  $('#td5' + i).attr("title", "内存总量：" + fluxUnitConversion(memtotal*1024) 
  + "\r\n内存使用量：" + fluxUnitConversion(memused*1024));

  if (percentum >= 90) {
    $('#div5' + i).removeClass().addClass("progress-bar progress-bar-danger");
  } else if (percentum < 70) {
    $('#div5' + i).removeClass().addClass("progress-bar progress-bar-info");
  } else {

    $('#div5' + i).removeClass().addClass("progress-bar progress-bar-warning");
  }

}

function checkCPU(CPU, i) {
  CPU=CPU.replace('%','');
  $('#div4' + i).css("width", CPU);
  $('#span4' + i).text(CPU+"%");
  if (toPoint(CPU) >= 90) {
    $('#div4' + i).removeClass().addClass("progress-bar progress-bar-danger");
  } else if (toPoint(CPU) < 70) {
    $('#div4' + i).removeClass().addClass("progress-bar progress-bar-info");
  } else {
    $('#div4' + i).removeClass().addClass("progress-bar progress-bar-warning");
  }
}

function checkDisk(Disk, i) {
	 
  var disktitle = '';
  var allUseDisk = 0;
  var allDisk = 0;
  var len = Disk.length;
  var judge = 0;

  for (var j = 0; j < len; j++) {
    disktitle = disktitle + Disk[j].FilesystemName + "(" + Disk[j].FilesystemUsed + '/' + Disk[j].FilesystemSize + ")\r\n";
    var FilesystemUsed = toNumber(Disk[j].FilesystemUsed);
    var FilesystemSize = toNumber(Disk[j].FilesystemSize);
    allUseDisk =FilesystemUsed;
    allDisk +=FilesystemSize;
    if (100 * (FilesystemUsed / FilesystemSize) > 90) {
    
	     judge = 1;
    }

  }

  var percentum = (100 * allUseDisk / allDisk).toFixed(1);


    DiskArr[i].push(percentum);
	

  if (judge == 1) {
    $('#pro6' + i).removeClass().addClass("progress pro-box-shadow");
  }
  $('#div6' + i).css("width", percentum + "%");
  $('#span6' + i).text(percentum + "%");
  $('#td6' + i).attr("title", disktitle);

  if (percentum >= 90) {
    $('#div6' + i).removeClass().addClass("progress-bar progress-bar-danger");
  } else if (percentum < 70) {
    $('#div6' + i).removeClass().addClass("progress-bar progress-bar-info");
  } else {
    $('#div6' + i).removeClass().addClass("progress-bar progress-bar-warning");
  }

}

//重新获取服务器状态
function reshowServerStatus() {
  showServerStatus();
}

//重新获取某一服务器状态
function showOneServerStatus(i) {
 var nowTime = getNowFormatDate(new Date());
  $('#td1' + i).text(nowTime); //设置查询时间
  var ip = $('#td2' + i).text();
  $('#td7' + i).css("background", ' url("../../images/loading-2.gif") no-repeat scroll 0 0 ');
  $('#td7' + i).css("background-position", 'center');
  $('#td7' + i + ' a').css("display", "none");
  $.ajax({
        url: '../../report/esbServerStatusData',
        type: 'post',
        dataType: 'json',
        data: {ip:ip},
        timeout: (config.mamagement.serverMonitoring.intervaltime||5)*1000,
        error: function(XMLHttpRequest, textStatus, errorThrown) {
        	
       	 	$('#td7' + i).removeAttr('style');
    		$('#td7' + i + ' a').css("display", "");
	        if($('#alert').text().indexOf(ip)==-1){
	        	promptInformation($('#alert'), 1, serverIP+"  获取信息失败","server"+i);
	        }
        	
        },
        success: function(result) {
    if (result.code == "0") {    
      $('#td3' + i).text(result.data.runtimes || '');
      $('#td8' + i).text(result.data.sendT || '');
      $('#td9' + i).text(result.data.receiveT || '');

      if (result.data.cpuus != null && typeof(result.data.cpuus) != "undefined") {
        checkCPU(result.data.cpuus, i);
      }
      if (result.data.memtotal != null && typeof(result.data.memtotal) != "undefined") {
        checkMem(result.data.memtotal, result.data.memused, i);
      }
      if (result.data.disk != null && typeof(result.data.disk) != "undefined") {
        checkDisk(result.data.disk, i);
      }

    } else {
      $('#div4' + i).css("width", "0%");
      $('#span4' + i).text('');

      $('#div5' + i).css("width", "0%");
      $('#span5' + i).text('');
      $('#td5' + i).removeAttr("title");

      $('#div6' + i).css("width", "0%");
      $('#span6' + i).text('');
      $('#pro6' + i).removeClass().addClass('progress');
      $('#td6' + i).removeAttr("title");
    }
    
   	 $('#td7' + i).removeAttr('style');
    $('#td7' + i + ' a').css("display", "");
    }
  },
  'json');
}



var myChart1 = echarts.init(document.getElementById('echartsCPU'));
var myChart2 = echarts.init(document.getElementById('echartsMemory'));
var myChart3 = echarts.init(document.getElementById('echartsDisk'));
var myChart4 = echarts.init(document.getElementById('echartsNetWork'));

function echartsCPU() {

  var data = Array();
  for (var i = 0; i < ServerIPArr.length; i++) {
    data.push({
      name: ServerIPArr[i],
      type: 'line',
      data: CPUArr[i]
    });
  }
  option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: { // 坐标轴指示器，坐标轴触发有效
        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
      }
    },
    legend: {
      data: ServerIPArr
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [{
      type: 'category',
      data: xArr,
      show: false
    }],
    yAxis: [{
      name: 'CPU使用率',
      type: 'value',
      min:0,
      max:100
    }],
    series: data
  };

  myChart1.setOption(option);

}

function echartsMem() {

  var data = Array();
  for (var i = 0; i < ServerIPArr.length; i++) {
    data.push({
      name: ServerIPArr[i],
      type: 'line',
      data: MemArr[i]
    });
  }
  option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: { // 坐标轴指示器，坐标轴触发有效
        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
      }
    },
    legend: {
      data: ServerIPArr
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [{
      type: 'category',
      data: xArr,
      show: false
    }],
    yAxis: [{
      
      name: '内存使用率',
      type: 'value',
      min:0,
      max:100
    }],
    series: data
  };
  myChart2.setOption(option);
}

function echartsDisk() {

  var data = Array();
  for (var i = 0; i < ServerIPArr.length; i++) {
    data.push({
      name: ServerIPArr[i],
      type: 'line',
      data: DiskArr[i]
    });
  }
  option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: { // 坐标轴指示器，坐标轴触发有效
        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
      }
    },
    legend: {
      data: ServerIPArr
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [{
      type: 'category',
      data: xArr,
      show: false
    }],
    yAxis: [{
      name: '磁盘使用率',
      type: 'value',
      min:0,
      max:100
    }],
    series: data
  };
  myChart3.setOption(option);
}

function echartsNetWork() {

  var data = Array();
  for (var i = 0; i < ServerIPArr.length; i++) {
 
    data.push({
      name: ServerIPArr[i],
      type: 'line',
      data: NetWorkArr[i][0]//实线   接收
    });
     data.push({
      name: ServerIPArr[i],
      type: 'line',
      data: NetWorkArr[i][1],
      lineStyle: { normal: {  type: 'dashed' } }//虚线   发送
    });
  }
  option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: { // 坐标轴指示器，坐标轴触发有效
        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
      },formatter: function (params, ticket, callback) {
      var tooltipHtml = "";
      for(var i = 0;i<params.length;i++){
             var j = parseInt(i/2);  
             if(i%2==0){
             	tooltipHtml=tooltipHtml+ ServerIPArr[j]+"(发送) "+(params[i].data||0)+"</br>";
             }else{            
     			tooltipHtml=tooltipHtml+ ServerIPArr[j]+"(接收) "+(params[i].data||0)+"</br>"; 
             }    		  		
      }  
    
    return tooltipHtml;
}
    },
    legend: {
      data: ServerIPArr
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [{
      type: 'category',
      data: xArr,
      show: false
    }],
    yAxis: [{
      name: '吞吐量(B/S)',
      type: 'value'
    }],
    series: data
  };
  myChart4.setOption(option);
}
window.onresize = function() {
  myChart1.resize(); //使第一个图表适应
  myChart2.resize(); // 使第二个图表适应
  myChart3.resize(); // 使第二个图表适应
  myChart4.resize();
  
  
};



</script>


</body></html>